/*
 * @Author: hongbin
 * @Date: 2021-11-24 20:28:17
 * @LastEditors: hongbin
 * @LastEditTime: 2021-11-24 20:46:43
 * @Description:小飞机
 */
import { FC, ReactElement, useEffect, useRef } from "react";
import styled from "styled-components";
import { flexCenter } from "../BUI/styled";
interface IProps {}

const Plane: FC<IProps> = (): ReactElement => {
  const planeRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const plane = planeRef.current as HTMLDivElement;
    const { offsetWidth, offsetHeight } = plane;
    document.addEventListener("mousemove", e => {
      e.preventDefault();
      plane.style.top = e.pageY - offsetWidth / 2 + "px";
      plane.style.left = e.pageX - offsetHeight / 2 + "px";
    });
  }, []);

  return <Wrap ref={planeRef}>{Icon}</Wrap>;
};

export default Plane;

const Wrap = styled.div`
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  ${flexCenter};
`;

const Icon = (
  <svg
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="4990"
    width="64"
    height="64"
  >
    <path
      d="M298 771.3h89.7v44.8H298zM477.3 771.3H567v44.8h-89.7z"
      fill="#206BAB"
      p-id="4991"
    ></path>
    <path d="M656.7 771.3h89.7v44.8h-89.7z" fill="#206BAB" p-id="4992"></path>
    <path
      d="M492.3 68.9L93.5 693.6c-21.4 33.5 2.8 77.3 42.5 77.1h774.1c37.4-0.2 63.9-46.5 43.6-77.9L552 68.9c-24-35.8-35.9-35.8-59.7 0z m0 0"
      fill="#EEAC38"
      p-id="4993"
    ></path>
    <path
      d="M136 770.7c-39.7 0.2-63.9-43.6-42.5-77.1L492.3 68.9s8.9-17.3 25.8-14.9l4 716.8H136z m0 0"
      fill="#F0BB5D"
      p-id="4994"
    ></path>
    <path
      d="M581.9 128.6H462.4s34.5-74.1 57.9-74.7c36.2-0.9 61.6 74.7 61.6 74.7z m0 0"
      fill="#74A2CA"
      p-id="4995"
    ></path>
    <path
      d="M402.6 771.3H283V547.1c0-33 26.8-59.8 59.8-59.8s59.8 26.8 59.8 59.8v224.2z m0 0"
      fill="#206BAB"
      p-id="4996"
    ></path>
    <path d="M283 711.5h119.6v59.8H283z" fill="#FFFFFF" p-id="4997"></path>
    <path
      d="M761.3 771.3H641.7V547.1c0-33 26.8-59.8 59.8-59.8s59.8 26.8 59.8 59.8v224.2z m0 0"
      fill="#206BAB"
      p-id="4998"
    ></path>
    <path d="M641.7 711.5h119.6v59.8H641.7z" fill="#FFFFFF" p-id="4999"></path>
    <path
      d="M178.4 771.3h-47.7c-31.5 0-51.1-29.7-42-59.8 11.7-38.7 89.7-151 89.7-151v210.8z m0 0M865.9 771.3h47.7c31.5 0 53.4-32.4 44.2-62.5-11.7-38.7-91.9-152.4-91.9-152.4v214.9z m0 0"
      fill="#74A2CA"
      p-id="5000"
    ></path>
    <path
      d="M626.8 317.6c0-57.8-46.8-104.6-104.6-104.6s-104.6 46.8-104.6 104.6l104.6 59.8 104.6-59.8z m0 0"
      fill="#FFFFFF"
      p-id="5001"
    ></path>
    <path
      d="M298 831h29.9v44.8h29.9V831h29.9v-29.9H298V831z m0 0M746.3 801.2h-89.7V831h29.9v44.8h29.9V831h29.9v-29.8z m0 0M567 801.2h-89.7V831h29.9v44.8h29.9V831H567v-29.8z m0 0M73.8 801.2h29.9v209.2H73.8zM133.6 875.9h29.9v104.6h-29.9zM178.4 801.2h29.9V846h-29.9zM940.6 801.2h29.9v209.2h-29.9zM880.8 875.9h29.9v104.6h-29.9zM836 801.2h29.9V846H836zM487.9 303.6l-21.1-21.1 29.9-29.9 21.1 21.1-29.9 29.9z m0 0M547.7 303.6l-21.1-21.1 29.9-29.9 21.1 21.1-29.9 29.9z m0 0M327.9 905.8h29.9v104.6h-29.9zM507.2 905.8h29.9v104.6h-29.9zM686.6 905.8h29.9v104.6h-29.9z"
      fill="#1C1C1A"
      p-id="5002"
    ></path>
    <path
      d="M447.4 517.2h29.9v29.9h-29.9zM447.4 577h29.9v29.9h-29.9zM447.4 636.8h29.9v29.9h-29.9zM567 577h29.9v29.9H567zM567 636.8h29.9v29.9H567z"
      fill="#FFFFFF"
      p-id="5003"
    ></path>
    <path d="M567 517.2h29.9v29.9H567z" fill="#FFFFFF" p-id="5004"></path>
    <path
      d="M961 698.2L568.2 64.6c-9.9-16-27.1-25.6-46-25.6s-36.1 9.6-46 25.6L83.3 698.2c-10.5 16.9-11 37.4-1.3 54.9 9.7 17.4 27.4 27.8 47.3 27.8H915c19.9 0 37.6-10.4 47.3-27.8 9.7-17.4 9.2-37.9-1.3-54.9zM701.5 502.3c24.7 0 44.8 20.1 44.8 44.8v149.5h-89.7V547.1c0.1-24.7 20.2-44.8 44.9-44.8z m-44.8 224.1h89.7V751h-89.7v-24.6z m59.7-252.5v-31.4h-29.9v31.4c-34.1 6.9-59.8 37.1-59.8 73.2V751H537V386l104.6-59.8v-8.7c0-65.9-53.6-119.6-119.6-119.6s-119.6 53.6-119.6 119.6v8.7L507 386v365h-89.7V547.1c0-36.1-25.7-66.3-59.8-73.2v-31.4h-29.9v31.4c-34.1 6.9-59.8 37.1-59.8 73.2V751h-74.7V577.4l269-433.8H582l269 433.8V751h-74.7V547.1c-0.1-36.1-25.8-66.3-59.9-73.2zM522.2 360.2l-89.3-51c4.3-45.5 42.7-81.2 89.3-81.2 46.6 0 85 35.7 89.3 81.2l-89.3 51zM342.8 502.3c24.7 0 44.8 20.1 44.8 44.8v149.5H298V547.1c0-24.7 20.1-44.8 44.8-44.8zM298 726.4h89.7V751H298v-24.6zM501.5 80.3c4.5-7.3 12-11.5 20.6-11.5s16.1 4.2 20.6 11.5l20.7 33.4h-82.6l20.7-33.4zM108.1 738.6c-4.3-7.8-4.1-17 0.6-24.6l54.8-88.4V751h-34.2c-8.9 0-16.9-4.6-21.2-12.4z m828.1 0c-4.3 7.8-12.3 12.5-21.2 12.5h-34.2V625.6l54.8 88.4c4.7 7.6 5 16.8 0.6 24.6z m0 0"
      fill="#1C1C1A"
      p-id="5005"
    ></path>
  </svg>
);
